<template>
  <div class="container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="">
          <img :src="form.userPicture" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.userName" readonly width="80px"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.userSex" readonly width="80px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.userPhone" readonly width="80px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.userEmail" readonly width="80px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogFormVisible = true">修改</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="修改个人信息"
      :visible.sync="dialogFormVisible"
      style="width: 60%; left: 20%"
      @close="dialogClose"
    >
      <div class="form-box">
        <el-form ref="changeform" :model="changeform" label-width="80px" :rules="rules">
          <el-form-item label="联系电话" prop="userPhone">
            <el-input type="text" v-model="changeform.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="userEmail">
            <el-input type="text" v-model="changeform.userEmail"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="userPwd">
            <el-input type="password" v-model="changeform.userPwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPwd">
            <el-input type="password" v-model="changeform.checkPwd"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import validatecommon from "../../utils/validateutils";
export default {
  name: "baseform",
  data() {
    var validatePwd2 = (rule, value, callback) => {
      if (this.changeform.userPwd === this.changeform.checkPwd) {
        callback();
      } else {
        callback(new Error("两次密码不一致"));
      }
    };
    return {
      form: {},
      dialogFormVisible: false,
      changeform: {
        userPhone: "",
        userEmail: "",
        userPwd: "",
        checkPwd: "",
      },
      rules: {
        userPhone: [{ validator: validatecommon.validatePhone, trigger: "blur" }],
        userEmail: [{ validator: validatecommon.validateEmail, trigger: "blur" }],
        userPwd: [{ validator: validatecommon.validatePwd, trigger: "blur" }],
        checkPwd: [{ validator: validatePwd2, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交信息
    onSubmit() {
      this.$refs.changeform.validate((valid) => {
        if (valid) {
          this.$post("/user/modify_information", this.changeform).then((res) => {
            if (res.code === 0) {
              this.$message.success("操作成功");
              this.dialogFormVisible = false;
              this.initInfo();
              this.changeform = {
                userPhone: "",
                userEmail: "",
                userPwd: "",
                checkPwd: "",
              };
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("输入不符合规范！");
          console.log("error input");
        }
      });
    },
    //初始化信息
    initInfo() {
      this.$post("/user/getUserInfo", null).then((res) => {
        if (res.code === 0) {
          this.form = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 弹窗关闭
    dialogClose() {
      this.changeform = {};
    },
  },
  created() {
    this.initInfo();
  },
};
</script>
<style scoped>
.el-input {
  width: 200px;
  font-size: 15px;
}
</style>
